<template>
  <el-table
    ref="elTable"
    :height="tableHeight"
    :max-height="maxHeight"
    @selection-change="handleSelectionChange"
    border
  >
    <template slot="empty"> 没有查询到符合条件的记录 </template>
    <el-table-column type="selection" width="60" v-if="needSelection" />
    <el-table-column type="index" :width="indexWidth" fixed label="序号" v-if="needSerialNumber" />
    <!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
    <el-table-column
      v-for="(item, index) in columnData"
      :key="index"
      :resizable="item.resizable"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :prop="item.prop"
      :label="item.label"
      :fixed="item.fixed"
      :width="item.width"
    >
      <template slot-scope="scope">
        <slot name="data" :item="item" :scope="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'PLTABLE',
  props: {
    columnData: { type: Array, required: true },
    needSelection: { type: Boolean, default: true },
    needSerialNumber: { type: Boolean, default: true },
    indexWidth: { type: Number, default: 50 },
    tableHeight: { type: [String, Number] },
    rowHeight: { type: [String, Number] },
    maxHeight: { type: [String, Number] },
  },
  data() {
    return {}
  },
  watch: {
    tableHeight(value) {
      this.$nextTick(() => {
        // this.$refs.plTable.setHeight()
      })
    },
  },
  methods: {
    handleSelectionChange(e) {
      this.$emit('handleSelectionChange', e)
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
